<template>
  <div class="main">
    <div class="left-area">
      <router-link :to="{name: 'sitdown'}" class="top-btn">
        <Button class="tool-btn">Sitdown</Button>
      </router-link>
      <router-link :to="{name: 'markdown-nice'}" class="top-btn">
        <Button class="tool-btn">Markdown-Nice</Button>
      </router-link>
    </div>
    <div  class="content">
      <keep-alive>
        <router-view/>
      </keep-alive>
    </div>
  </div>
</template>
<script>
import './tool-main.less'
export default {
  name: 'ToolMain',
  components: {
  },
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
  },
  watch: {
  },
  mounted () {
  }
}
</script>
<style lang="less" scoped>
  .main {
    height: 100%;
    .left-area {
      width: 160px;
      float: left;
      padding: 0px 4px;
      .tool-btn {
        display: block;
        width: 100%;
        margin: 3px auto;
      }
    }
    .content {
      margin-left: 160px;
      height: 100%;
    }
  }
</style>
